<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器的使用</title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			用户输入的内容：<input type="text" v-model="username" /><br />
			数据：{{username|rename}}<br />
			<!-- 过滤器级联 -->
			数据：{{username|rename|addChar}}
		</div>
		
	</body>
	<script>
		// 单独定义过滤器 参数1：过滤器名称 参数2：过滤器执行的方法
		// 注意事项：过滤器需要返回值
		Vue.filter('rename',function(value){
			return value.split('').reverse().join('')
		})
		
		// 箭头函数：
		// 可以省略function关键字，如果只有一个参数则()可以省略，使用=>进行关联
		Vue.filter('addChar',value=>{
			return value+'哈哈哈'
		})
		
		const app = new Vue({
			el:"#app",
			data:{
				username:''
			}
		})
	</script>
</html>
